<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-share"></i> 关于</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            
            <el-input v-model="select_word" placeholder="输入编号查询" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
            <el-button type="text" @click="dialogVisible = true"><i class="el-icon-plus addData"></i> </el-button>
            
        </div>
        <el-table :data="tableData" style="width: 100%">          
            
            <el-table-column  label="编号"  prop="id" sortable></el-table-column>           
            
            <el-table-column  label="内容"  prop="content" sortable></el-table-column>           
            
            <el-table-column  label="是否启用"  prop="is_enable" sortable>
                <template slot-scope="tim">
                    <span>{{tim.row.is_enable | enableFilter}}</span>
                </template>    
            </el-table-column>          
                
            <el-table-column type="expand">
               <template slot-scope="props">
                 <my-tababout :row ="props.row" ></my-tababout>  
               </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
                <template slot-scope="tes">
                    <el-button size="small" type="default" class="precli">查看</el-button><el-button size="small" type="danger"  @click="delCurr(tes.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                @current-change ="handleCurrentChange"
                layout="prev, pager, next" :total="pageCount" :page-size="10">
            </el-pagination>
        </div>    
        
        <el-dialog  title="添加信息"  :visible.sync="dialogVisible"  width="20%" :before-close="handleClose">
            <el-form :model="addForm">                
                 <el-form-item label="内容">
                    <el-input v-model="addForm.content" ></el-input>                    
                </el-form-item>       
                
                 <el-form-item label="是否启用">
                     <el-select v-model="addForm.is_enable" placeholder="请选择">
                        <el-option  v-for="item in seleOption" :key="item.key"  :label="item.value"  :value="item.key">
                        </el-option>
                    </el-select>                 
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveData()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {formatDate} from '../../js/date.js';
    export default {
        data() {
            return {
                url: '',
                tableData: [],
                cur_page: 1,
                select_word: '',
                ismodify:false,
                pageCount: 1,
                dialogVisible: false,
                addForm: {
                    content: '',
                    is_enable: ''
                },
                seleOption: [
                    {key: 1, value:'是'},
                    {key: 0, value:'否'}
                ]
            }
        },
        created(){
            
        },
        computed: {
            
        },
        methods: {
            search(){
                if(this.select_word === ''){
                    this.url='http://127.0.0.1:7001/api/v2/about'
                }else{
                    this.url='http://127.0.0.1:7001/api/v2/about/'+this.select_word                    
                }
                this.getData(this.url)
            },
            getData(url){
                this.$axios.get(url).then((res) => { 
                    if(res.data.data.records === undefined){
                        this.tableData=[res.data.data];
                        this.pageCount=0;
                    }else{
                        this.tableData=res.data.data.records;
                        this.pageCount=res.data.data.counts;
                    }                    
                }).catch((err) => {
                    console.log("link err")
                })  
            },
            handleCurrentChange(val){
                this.cur_page = val;
                this.url='http://127.0.0.1:7001/api/v2/about/?pageNum='+this.cur_page
                this.getData(this.url);
            },
            handleClose(done) {                
                this.clearVal();
                done();
            },
            saveData(){                
                this.$confirm('确认保存？')
                .then(_ => {
                    this.$axios.post('http://127.0.0.1:7001/api/v2/about/',this.addForm).then((res)=>{
                        this.dialogVisible=false;
                        this.clearVal();
                        this.getData('http://127.0.0.1:7001/api/v2/about?pageNum='+this.cur_page)
                    }).catch((err)=>{
                        console.log("save error");
                        this.dialogVisible=false;
                    })                    
                }).catch(_ => {});  
                
            },
            delCurr(id){             
                this.url='http://127.0.0.1:7001/api/v2/about/'+id
                this.$confirm('确认删除？').then(_ => {
                    this.$axios.delete(this.url).then((res)=>{   
                        this.getData('http://127.0.0.1:7001/api/v2/about?pageNum='+this.cur_page)                
                    }).catch((err)=>{
                        console.log('del err'+err)
                    })
                }).catch(_ => {})
                
            },
            clearVal(){
                this.addForm={
                    content: '',
                    is_enable: ''
                }
            }
        },
        mounted () {
            this.url='http://127.0.0.1:7001/api/v2/about'
            this.getData(this.url)            
        },
        filters: {
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        }
    }
</script>

<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 300px;
    display: inline-block;
}
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33%;
  }
.addData{color:#20A0FF;margin-left: 50px;}

</style>


